<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<style>
	.swiper-pagination-bullet {
		background: none;
		border: 1px solid #FFF;
		opacity: 1;
	}
	.swiper-pagination-bullet-active {
		background: #FFF;
	}
	.swiper-container-horizontal > .swiper-pagination-bullets {
		bottom: 3px;
	}


</style>
</head>
<body class="bg-f5">
	<div id="data_html"></div>
	<script type="text/x-dot-template" id="data_tpl">
	<div data-page="1">
		<div class="scrollHeight">
		{{ if(it.length > 0){ }}
		<div class="hotMap">
			<ul class="aui-flex-col">
				{{ for(var i in it) { }}
				<li data-catId="{{= it[i].class_parent_id}}" data-subCatId="{{= it[i].class_id}}" tapmode onClick="openCat(this);">
					<div class="ico"><img src="{{= it[i].class_icon ? it[i].class_icon : '../image/demo/01.png' }}" alt=""></div>
					<div class="txt">{{= it[i].class_name}}</div>
				</li>
				{{ } }}
			</ul>
		</div>
		<div style="background: #f5f5f5; height: 0.1rem;"></div>
		{{ } }}
		</div>
		<div class="sortBox">
			<div class="sortList aui-flex-col aui-flex-middle">
				<div class="active" tapmode onClick="changeSort(0);">综合</div>
				<div tapmode onClick="changeSort(1);">优惠券</div>
				<div tapmode onClick="changeSort(2);">佣金</div>
				<div class="sort_price" tapmode onClick="changeSort(3);"><span>价格</span></div>
			</div>
		</div>
		<div class="comFlowBox">
			<div class="comGodList" id="flow_html">
				<div class="grid-sizer"></div>

			</div>
		</div>
	</div>
	</script>
	<script type="text/x-dot-template" id="flow_tpl">
		{{ for(var i in it){ }}
		{{ if(it[i].title){ }}
		<div class="item" data-id="{{= it[i].shop_id}}" tapmode onClick="openProductDetail({{= it[i].shop_id}});">
            <div class="inner">
                {{ if(it[i].data_amount && getUserVip()>1 ){ }}
                <div class="earn">赚￥{{= it[i].data_amount}}</div>
                {{ } }}
                <div class="photo"><img src="{{= it[i].pict_url}}" alt=""></div>
                <div class="textBox">
                    <div class="title aui-flex-col aui-flex-middle">
                        <div class="aui-ellipsis-2"><span class="tag">{{= it[i].user_type }}</span>{{= it[i].title }}</div>
                    </div>
                    <div class="aui-flex-col aui-flex-middle priceBox">
						<div class="nowPrice">¥{{= it[i].coupon_amount }}</div>
						<div class="delPrice">¥<del>{{= it[i].zk_final_price }}</del></div>
					</div>
                    <div class="aui-flex-col aui-flex-middle aui-flex-between">
                        {{ if( it[i].coupon_info ){ }}
                        <dl class="quan outline aui-flex-col aui-flex-middle">
                            <dt>券</dt>
                            <dd>{{= it[i].coupon_info }}元</dd>
                        </dl>
                        {{ }else{ }}
                        <div></div>
                        {{ } }}
                        <div class="sale">月销 {{= it[i].volume }}件</div>
                    </div>
                </div>
            </div>
		</div>
		{{ } }}
		{{ } }}
    </script>


</body>
<script type="text/javascript" src="../script/import.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="../script/masonry.pkgd.min.js"></script>
<script type="text/javascript">
var isinerval;
var PARAM_INFO;
var CAT_ID,SUB_CAT_ID;
var gridDom = '#flow_html';
var grid;
var isLoading = false;
var loadFlag = true;
var pageSize = 50;
var currentPage = 1;
var postData = {};
var filterType = 0;
apiready = function(){
	api.parseTapmode();
	PARAM_INFO = api.pageParam;
	CAT_ID = PARAM_INFO.catId;
	SUB_CAT_ID = PARAM_INFO.subCatId;

	showPage();
	// 监听到达底部
	api.addEventListener({
	  name:'scrolltobottom',
	  extra:{
		  threshold: 0
	  }
	}, function(ret, err){
		if(isLoading)return;
		if(loadFlag){
			getData();
		}
	});

	//登录成功后 刷新数据
	api.addEventListener({
		name: 'loginSuccessEvent'
	}, function(ret, err){
		setPostData();
	});
};
//滚动页面 筛选条 固定
window.onscroll = function(e) {
	var hotHeight = $$('.scrollHeight').outerHeight();
	var scrollTop = document.body.scrollTop;
	if (scrollTop >= hotHeight) {
		$$('.sortList').addClass('fix');
	}else{
		$$('.sortList').removeClass('fix');
	}
};
//获取二级类目
function showPage(){
	api.ajax({
		url: BASE_URL + 'App/Select/sortLists',
		method: 'post',
		data: {
			values: {
				class_id: PARAM_INFO.catId
			}
		}
	},function(ret,err){
		if (ret && ret.code == 1) {
			var tpl = $$('#data_tpl').html();
			var tempFn = doT.template(tpl);
			$$('#data_html').html(tempFn(ret.data));
			api.parseTapmode();
			checkHotMapLen();

			//调用瀑布流
			grid = new Masonry( gridDom, {
				columnWidth: '.grid-sizer',
				itemSelector: '.item',
				percentPosition: true
			});
			imagesLoaded( gridDom, function() {
				grid.layout();
			});
			setPostData();
		}
	});

}

//根据类目数量 设置一排显示4个还是5个
function checkHotMapLen(){
	$$('.hotMap').each(function(){
		var _this = $$(this);
		var len = _this.find('li').length;
		if(len < 9){
			_this.addClass('less');
		}else{
			_this.removeClass('less');
		}
	});
}

//瀑布流
function getFlow(flowData) {
	var tpl = $$('#flow_tpl').html();
	var tempFn = doT.template(tpl);
	var elem = $$(tempFn(flowData));
	if( currentPage==1 ){
		$$('#flow_html').html('<div class="grid-sizer"></div>');
	}
	$$(gridDom).append(elem);
	grid.appended(elem);
	imagesLoaded(gridDom, function() {
		grid.layout();
	});

	api.parseTapmode();
}

//打开产品列表
function openProductList(){
	api.openWin({
		name: 'product_list_win',
		url: 'best/product_list_win.html',
		bounces: false,
		pageParam: {
			key : 'value'
		}
	});
}
//跳转到分类页面
function openCat(el){
	var _this = $$(el);
	var catId = _this.data('catid');
	var subCatId = _this.data('subcatid');
	var catName = _this.find('.txt').text();
	api.openWin({
		name: 'product_list_win',
		url: 'best/product_list_win.html',
		pageParam: {
			pageTitle: catName,
			catId: catId,
			subCatId: subCatId
		}
	});
}
//打开专题
function openSubject(){
	api.openWin({
		name: 'subject_win',
		url: 'best/subject_win.html',
		bounces: false,
		pageParam: {
			key : 'value'
		}
	});
}

//切换排序
function changeSort(ind){
	filterType = ind;
	if(ind==3){
		if( $$('.sortList .sort_price').hasClass('on') ){
			$$('.sortList .sort_price').removeClass('on');
		}else if($$('.sortList .sort_price').hasClass('active')){
			$$('.sortList .sort_price').addClass('on');
			filterType = 4;
		}
	}else{
		$$('.sortList .sort_price').removeClass('on');
	}
	$$('.sortList > div').removeClass('active').eq(ind).addClass('active');

	setPostData();
}
function setPostData(){
	currentPage = 1;
	loadFlag = true;
	postData = {
		shop_class_one: CAT_ID,
		//shop_class_two: SUB_CAT_ID,
		pageSize: pageSize
	}
	if(filterType == 1){
		//优惠券
		postData.coupon = true;
	}
	if(filterType == 2){
		//佣金
		postData.data_amount = -1;
	}
	if(filterType == 3){
		//价格升序
		postData.zk_final_price = 1;
	}
	if(filterType == 4){
		//价格降序
		postData.zk_final_price = -1;
	}
	if(getUserId()){
		postData.userid = getUserId();
	}
	getData();
}
//获取数据
function getData(){
	// console.log(JSON.stringify(postData));
    isLoading = true;
	postData.pageNo = currentPage;
    api.ajax({
        url: BASE_URL + 'App/Select/shopList',
        method: 'post',
        data: {
            values: postData
        }
    },function(ret,err){
			// console.log(JSON.stringify(ret));
        if (ret) {
            if(ret.code == 1 && ret.data.length > 0){
                $$('.noData,.noMoreData').addClass('aui-hide');
                getFlow(ret.data);
                currentPage++;
                api.parseTapmode();
                //如果加载出来的数量 小于 pagesize 说明到底线了
                if(ret.data.length < postData.pageSize){
                    $$('.noMoreData').removeClass('aui-hide');
                    loadFlag = false;
                }
			}else{
				if(currentPage == 1){
                    $$('#flow_html').html('');
                    $$('.noMoreData').addClass('aui-hide');
                    $$('.noData').removeClass('aui-hide');
                }else{
                    $$('.noMoreData').removeClass('aui-hide');
                }
                loadFlag = false;
			}
        }
        isLoading = false;
    });
}
</script>
</html>
